<template>
  <div id="subCustomData">
    <header>
      <i @click="goBack()"></i>
      <div>客户信息</div>
    </header>
    <!-- 内容选择器 -->
    <div class='mc' v-show='isDate' @click.stop='isDate=false'>
      <div class='duration' @click.stop='isDate=true'>
        <div class='top'>
          <a @click.stop='isDate=false'>取消</a>
          <a @click.stop='sure'>确定</a>
        </div>
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
      </div>
    </div>
    <div style="height:0.7rem;margin-bottom: 0.27rem;
    padding: 0rem 0.27rem;
    border-bottom: 1px dotted #eee;">
      <img src="../../image/infohead.png" alt="" style="margin-top: 0.12rem;">
    </div>
    <ul>
      <li>
        <a>
          姓名:
          <input type="text" v-model="obj.name" placeholder="请输入真实姓名" required />
        </a>
      </li>
      <li>
        <a>
          性别:
          <input type="text" placeholder="请选择性别" @click='showPicker(0)' onfocus="this.blur();" v-model="obj.sex">
        </a>
      </li>
      <li>
        <a>
          手机号:
          <input type="text" v-model="obj.tele" placeholder="请输入手机号" required />
        </a>
      </li>
      <li>
        <a>
          我的地址:
          <!-- <textarea v-model="obj.address"  required></textarea> -->
          <input type="text" v-model="obj.address" placeholder="请输入地址" required />
        </a>
      </li>
      <li>
        <a>
          牙病描述:
          <input type="text" v-model="obj.demand" placeholder="请描述您的需求" required />
        </a>
      </li>
      <li style="padding-bottom: 10px;background:#fff;border:none;height: 0.5rem;">
        <a style="display: flex;">
          <el-upload v-for='x in 4' class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"'
            :show-file-list="false" :on-success="(res,file)=>{
                                      return handleAvatarSuccess(res,file,x-1)
                                  }"
            :before-upload="beforeAvatarUpload">
            <img v-if="relPic[x-1]" :src="relPic[x-1]" class="avatar" style="height:0.42rem">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </a>
      </li>


    </ul>
    <a class="confirmBtn" @click="save">
      提交订单
    </a>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        relPic: [],

        obj: {
          name: '',
          img: '', //上传
          tele: localStorage.getItem("loginMobile"),
          userid: localStorage.getItem("loginMobile"),
          demand: '',
          address: '', //详细地址
          docArr: '',
          sex: '' //性别
        },
        isDate: false,
        values: '男',
        slots: []

      }
    },
    components: {

    },
    methods: {
      goBack() {
        // this.$router.back(); 
        this.$router.push({
          path: '/findDoctor'
        })
      },
      init() {
        const docArr = this.$route.query.docArr;
        this.obj.docArr = docArr;
      },
      showPicker(str) { //0指性别 1指专业  2指学历
        this.isDate = true;
        this.kind = str;
        this.slots = [{
          values: ['男', '女'],
          className: 'slot1',
          textAlign: 'center'
        }, ]

      },
      onValuesChange(picker, values) {
        this.values = values[0];
      },
      //上传图片
      handleAvatarSuccess(res, file, i) {
        if (res.state == 200) {
          this.$set(this.relPic, i, res.result_origin);
        }
      },
      beforeAvatarUpload(file) {
        if (!/image\/\w+/.test(file.type)) {
          this.$utils._toast('请确保文件为图像类型');
          return false;
        }
        if (file.size > 5 * 1024 * 1024) {
          this.$utils._toast('上传图片不能超过5M');
          return false;
        }
      },

      sure() {
        if (this.values == undefined) {
          this.values = '男'
        }
        this.obj.sex = this.values
        this.isDate = false;
      },
      //保存
      save() {
        this.obj.img=JSON.stringify(this.relPic)
       
        if (!this.obj.name) {
          this.$utils._toast("请输入姓名");
          return false;
        } else if (!this.obj.tele) {
          this.$utils._toast("请输入手机号码");
          return false;
        } else if (!(/^1[34578]\d{9}$/.test(this.obj.tele))) {
          this.$utils._toast("手机号码不合法");
          return false;
        } else if (!this.obj.demand) {
          this.$utils._toast("请描述您的需求");
          return false;
        } else if (!this.obj.address) {
          this.$utils._toast("请输入您的详细地址");
          return false;
        } else {
          this.$api.post(this.$api.baseURLSchool, "update_patient_order/add", this.obj, r => {
            if (r.data.ret == 1) { //提交订单成功
              this.$utils._toast("下单成功,稍后诊所会联系您");
              setTimeout(() => {
                this.$router.push({
                  name: "customOrder"
                });
              }, 300);
            }
          }, err => {
            console.log(err);
          })
        }
      },

    },
    created() {
      this.init();
    },
    mounted() {}
  }

</script>
<style lang="scss" scoped>

</style>
